<template>
  <page-wrapper>
    <base-table>
      <b-row gutter="20">
        <b-col span="12">
          <!-- 模式选择 -->
          <div class="mode-selector mb-16">
            <b-button :type="mode === 'code' ? 'primary' : 'default'" @click="mode = 'code'">
              代码模式
            </b-button>
            <b-button :type="mode === 'url' ? 'primary' : 'default'" @click="mode = 'url'">
              URL模式
            </b-button>
          </div>

          <!-- 代码编辑器 -->
          <div v-if="mode === 'code'" class="editor-pane">
            <h3 class="mb-16">组件代码</h3>
            <b-ace-editor v-model="currentCode" lang="html" @change="render = true"></b-ace-editor>
          </div>

          <!-- URL输入 -->
          <div v-else class="url-pane">
            <h3 class="mb-16">远程组件URL</h3>
            <b-input v-model="currentUrl" type="textarea" placeholder="输入远程Vue单文件组件URL" />
          </div>

          <div class="action-buttons mt-16">
            <b-button @click="loadSampleCode">加载示例代码1</b-button>
            <b-button @click="loadSampleCode2">加载示例代码2</b-button>
            <b-button @click="loadSampleUrl">加载远程示例</b-button>
            <b-button type="primary" @click="load">载入</b-button>
          </div>
        </b-col>
        <b-col span="12">
          <!-- 预览区域 -->
          <div class="preview-pane">
            <h3>实时预览</h3>
            <DynamicVue3Loader
              v-if="render"
              :mode="mode"
              v-model:code="currentCode"
              v-model:url="currentUrl"
              :external-dependencies="externalDeps"
              :component-props="demoProps"
              :component-events="demoEvents"
              @loaded="handleComponentLoaded"
              @error="handleComponentError"
            />
          </div>
        </b-col>
      </b-row>
    </base-table>
  </page-wrapper>
</template>

<script setup>
import { ref } from 'vue'
import sampleCode from './sample-component.vue?raw'
import { defaultSfcCode } from './normal-sfc-demo.js'
import { Message } from 'bin-ui-design'
import * as echarts from 'echarts'
import { generateId } from '@/utils/util'

const mode = ref('code')
const currentCode = ref('')
const currentUrl = ref('')
const render = ref(false)

// 示例props
const demoProps = ref({
  message: 'Hello from parent!',
  initialCount: 0,
})

// 示例事件处理
const demoEvents = {
  'count-changed': newVal => console.log('Count changed:', newVal),
  'event-from-component': data => console.log('Event from component:', data),
}

// 外部依赖
const externalDeps = {
  'bin-ui-design': {
    Message,
  },
  echarts,
  utils: {
    uuid: generateId,
    formatDate: date => new Date(date).toLocaleString(),
  },
}

// 加载示例代码
const loadSampleCode = () => {
  currentCode.value = sampleCode
  currentUrl.value = ''
  mode.value = 'code'
}

const loadSampleCode2 = () => {
  currentCode.value = defaultSfcCode
  currentUrl.value = ''
  mode.value = 'code'
}

// 加载远程示例 (请替换为实际可访问的URL)
const loadSampleUrl = () => {
  currentUrl.value = '/sample-component.vue'
  currentCode.value = ''
  mode.value = 'url'
}

const load = () => {
  if (mode.value === 'code') {
    render.value = true
    currentUrl.value = ''
  } else if (mode.value === 'url') {
    render.value = true
    currentCode.value = ''
  }
}

const handleComponentLoaded = component => {
  console.log('组件加载成功:', component)
}

const handleComponentError = error => {
  console.error('组件加载失败:', error)
}
</script>

<style></style>
